<template>
  <div class="page">
    <navigation>{{ $t('转账明细') }}</navigation>
    <div class="mingxi">
      <div class="tabPanel">
        <div class="tabtitle">
          <li
            v-for="(item, index) in tabList"
            :key="item.text"
            :class="{ hit: item.active }"
            @click="switchTab(index)"
          >
            {{ $t(item.text) }}
          </li>
        </div>
        <div class="panes">
          <recharge v-show="activeIndex == 0"></recharge>
          <apply v-show="activeIndex == 1"></apply>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import recharge from '@/components/partials/exchange/bills/Recharge'
import apply from '@/components/partials/exchange/bills/Apply'
import navigation from '@/components/Navigation.vue'
export default {
  components: { navigation, recharge, apply },
  data () {
    return {
      tabList: [
        { text: '充值', active: true },
        { text: '提现', active: false }
      ],
      activeIndex: 0
    }
  },
  methods: {
    switchTab (index) {
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
    }
  }
}
</script>
<style scoped>
.mingxi {padding: 0;}
.mingxi .tabtitle {
  height: 42px;
  position: relative;
}
.mingxi .tabtitle li {
  position: relative;
  bottom: -1px;
}
</style>
